<template>
    <div class="makerList">
        <div class="makerList_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">精英列表<i class="el-icon-close"></i></div>
		</div>
        <div class="makerList_bottom">
            <div class="new">
                <div class="shopList">
                    <div class="shopList_serch">
                        <div class="shopClass">
                            <div>
                                <span>类型</span>
                                <div class="block">
                                   <el-select v-model="valueType" @change="_makerType"  placeholder="请选择">
										<el-option
										v-for="item in makerType"
										:key="item.type_id"
										:label="item.type_name"
										:value="item.type_id">
										</el-option>
									</el-select>
                                </div>
                            </div>
                            <div>
                                <span>状态</span>
                                <div class="block">
                                    <el-select v-model="valueStatus" @change="_makerStatus" placeholder="请选择">
										<el-option
										v-for="item in makerStatus"
										:key="item.status_id"
										:label="item.status_name"
										:value="item.status_id">
										</el-option>
									</el-select>
                                </div>
                            </div>
                            <!-- <div>
                                <span>改价权</span>
                                <div class="block">
                                    <el-select v-model="valueRoot" @change="_changeRoot" placeholder="请选择">
										<el-option
										v-for="item in changeRoot"
										:key="item.root_id"
										:label="item.root_name"
										:value="item.root_id">
										</el-option>
									</el-select>
                                </div>
                            </div> -->
                        </div>
                        <div class="shopList_serch_ipt">
							<el-input v-model="input" placeholder="请输入商品信息查询"></el-input>
							<button @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
						</div>
                    </div>
                </div>
            </div>
            
            <div class="makerList_table">
                <div class="makerList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
							<th>类型</th>
							<th>佣金比例</th>
							<th>销售排名</th>
							<th>姓名</th>
							<th>手机号</th>
							<th>销售金额</th>
							<th>推荐订单量</th>
							<th>状态</th>
							<th>改价权限</th>
							<th>创建时间</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{v.level==1?'铜牌':v.level==2?'银牌':v.level==3?'金牌':''}}</td>
							<td></td>
							<td></td>
							<td>{{v.realname}}</td>
							<td>{{v.mobile}}</td>
							<td>{{v.finish_sell_price}}</td>
							<td>{{v.spread_finish_num}}</td>
							<td>{{v.status==1?'正常':'禁用'}}</td>
							<td>{{v.change==1?'有':'无'}}</td>
							<td>{{$moment(v.create_time*1000).format('YYYY-MM-DD HH:mm')}}</td>
							<td>
								<!-- activeShelves -->
								<!-- <button class="editor" :disabled="changeNum>=2 && v.change==0" :class="{'activeShelves':changeNum>=2 && v.change==0,'shelves':v.change==1}" @click="toChange(v.guide_id,v.change)">{{v.change==1?'关闭改价权':'开启改价权'}}</button> -->
								<button class="delete" @click="toDel(v.id)">删除</button>
							</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="12">当前数据空空如也</td></tr>
					</table>
				</div>
				<div class="makerList_bottom_page">
				<div class="makerList_bottom_page_left">
					<div class="makerList_bottom_page_left_checkAll" @click="handerCheckAll">
						<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
					</div>全选
					<button class="makerList_bottom_page_left_btn" @click="selectDel">删除</button>
					</div>
					<div class="makerList_bottom_page_right">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="page"
							:page-sizes="[10, 20, 30, 40]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total"
							background>
						</el-pagination>
					</div>
				</div>
            </div>
        </div>
    </div>
</template>

<script>
import api from '@/api/index.js'
import { log } from 'util';
export default {
    data(){
        return{
            // 类型
            makerType:[
                {type_name:'金牌',type_id:3},
                {type_name:'银牌',type_id:2},
                {type_name:'铜牌',type_id:1},
               ],
			   valueType:null,

            // 状态
            makerStatus:[
                {status_name:'正常',status_id:1},
                {status_name:'已过期',status_id:0},
               ],
			   valueStatus:null,

			// 改价权
			changeRoot:[
				{root_name:'不限',root_id:null},
				{root_name:'有权限',root_id:1},
				{root_name:'无权限',root_id:0},
			],
			valueRoot:null,

            tableList:[],
            input:'',
			checkAll:false,
			page:1,
			pageSize:10,
			total:0,
            checkBoxAll:[],				// 选中的数据
			shelvesAlls:[],
			status:null,
			level:null,
			change:null,
			changeNum:0,//现有改价权人数
        }
    },
	mounted(){
		this.getMarkeList()
	},
    methods: {
		// 获取精英列表
		getMarkeList(){
			api.getMarkeList({page:this.page,pagesize:this.pageSize,status:this.status,level:this.level,change:this.change}).then(res=>{
				console.log(res);
				if(res.code==1){
					this.tableList = res.data.list?res.data.list:[];
					this.total = res.data.total,
					this.changeNum = res.data.change_num
				}
			})
		},

		// 移除创业精英
		toDel(id){
			this.$confirm('此操作将删除当前项, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(()=>{
				api.removeMaker({ids:id}).then(res=>{
					console.log(res);
					if(res.code==1){
						this.getMarkeList();
						this.checkAll=false;
						this.checkBoxAll=[];
						this.shelvesAlls=[];
						this.$message({
							type:'success',
							message:'删除成功'
						})
					}
				})
			})
		},

		// 开启或移除改价权限
		toChange(guideId,change){
			let url = change==1?'/api/admin/guide/Index/delChanger':'/api/admin/guide/Index/addChanger';
			this.$http.post(url,{guide_id:guideId}).then(res=>{
				console.log(res);
				if(res.code==1){
					this.$message.success('操作成功');
					this.getMarkeList()
				}else{
					this.$message.error(res.msg)
				}
			})
		},

         // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index != -1){
						arr.splice(index,1);
						this.shelvesAlls.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].id);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
					this.shelvesAlls.push(this.tableList[v].id.toString());;
				})
				}else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},


		// 全选后的删除
		selectDel(){
			console.log(this.shelvesAlls);
			let res =[...new Set(this.shelvesAlls)]; //去重
			let str = res.join(',');
			if(this.shelvesAlls.length){
				this.$confirm('此操作将删除选中项, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(()=>{
					api.removeMaker({ids:str}).then(res=>{
						console.log(res);
						if(res.code==1){
							this.getMarkeList();
							this.checkAll=false;
							this.checkBoxAll=[];
							this.shelvesAlls=[];
							this.$message({
								type:'success',
								message:'删除成功'
							})
						}
					})
				})
			}else{
				this.$message({
					type:'info',
					message:'请选择要删除的项'
				})
			}
		},

		// 选择类型
		_makerType(e){
			console.log(e);
			this.level = e
			this.getMarkeList()
		},

		// 选择状态
		_makerStatus(e){
			console.log(e);
			this.status = e
			this.getMarkeList()
		},

		// 选择改价权限
		_changeRoot(e){
			console.log(e);
			this.change = e,
			this.getMarkeList()
		},

        // 搜索
        handerSeach(){},

        handleChange1(){},
        handleChange2(){},

        //分页
			handleSizeChange(val) {
				this.pageSize = val;
				console.log(val);
				this.getMarkeList()
			},
			handleCurrentChange(val) {
			    this.page = val;
				console.log(val);
				this.getMarkeList()
			},
    },
}
</script>

<style lang="less" scoped>
    @import 'makerList.less';
</style>